<template>
	<view class="product">
		<!-- 头部 -->
		<view class="product_top">
			<image src="/static/logo.png" style="width: 60px;height: 60px;" scaleToFill></image>
			<p class="title">
				<span class="pp">品牌</span>
				<b style="margin: 0 6px;">{{title.shopname}}</b>
				<u-icon name="play-right-fill" size="14"></u-icon>
			</p>
			<p class="xiao">
				<span>月销100单</span>
				<span>{{title.content}}</span>
				<span>约{{title.fee}}分钟</span>
				<span>距离</span>
			</p>
		</view>
		<!-- 主体 -->
		<view class="product_main">
			<u-tabs :list="tabs" @click="gotab"></u-tabs>
			<u-popup :show="show" @close="close" @open="open">
				<view class="PopupTop">
					<view class="PopupEmpty">清空</view>
				</view>
				<view v-for="(item,index) in this.$store.state.shopCar" :key="index" class="shopItem">
					<view class="shopImg">
						<image src="https://cdn.uviewui.com/uview/swiper/swiper2.png"></image>
					</view>
					<view class="shopText">
						<view class="shopTxt" style="float: left;">
							<view>{{item.foodname}}</view>
							<view>¥{{item.price}}</view>
						</view>
						<view class="shopPrice" style="float: right;">
							<button style="float: left;" @click="reduce(item)">-</button>
							<view style="float: left; line-height: 50px;">{{item.maxcount}}</view>
							<button style="float: left;" @click="add(item)">+</button>
						</view>
					</view>

				</view>
				<view class="PopupFoot"><button @click="goBalance">结算</button></view>
			</u-popup>
			<view v-show="isActive">
				<view class="">
					<p class="foodtitle">商品食品</p>
					<view class="food" v-for="(item,index) in foodData" :key="index">
						<image style="width: 60px;height: 60px;" src="../../static/uni.png" mode=""></image>
						<p style="display: flex;flex-direction: column;">
							<span>{{item.foodname}}</span>
							<span style="font-size: 12px;color: #666;">{{item.descr}}</span>
							<span style="font-size: 12px;color: #666;">月销{{item.maxcount}}份 好评率90%</span>
							<span style="color: red;">￥{{item.price}}</span>
						</p>
						<span>
							<button style="float: left;" @click="reduce(item)">-</button>
							<view style="float: left; line-height: 50px;">{{item.maxcount}}</view>
							<button style="float: left;" @click="add(item)">+</button>
						</span>
					</view>
				</view>
			</view>
			<view v-show="!isActive" class="">
				222
			</view>
		</view>
		<view class="product_foot">
			<view class="product_foot_Price">总价：{{this.$store.getters.totalPrice}}</view>
			<view>
				<u-button class="product_foot_Btn" type="primary" style="width: 100px; margin-right: 10px; margin-top: 10px;"
					@click="show = true">结算</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				// 标题
				title: [],
				// 食品
				foodData: [],
				// tab
				tabs: [{
						name: '点餐'
					},
					{
						name: '评价'
					}
				],
				// 点击tab切换
				isActive: true,
				value: 0,
			}
		},
		onLoad(query) {
			// 商户信息
			uni.request({
				url: 'http://10.31.67.9:8002/admin/shoplistone',
				method: 'GET',
				data: {
					id: query.id
				},
				success: (res) => {
					// console.log('商户信息请求成功',res.data)
					this.title = res.data
				},
				fail(err) {
					console.log('商户信息请求失败', err)
				}
			})
			// 食品信息
			uni.request({
				url: 'http://10.31.67.9:8002/admin/vueshopgoods',
				method: 'GET',
				data: {
					id: query.id
				},
				success: (res) => {
					// console.log('食品信息请求成功', res.data)
					this.foodData = res.data
				},
				fail(err) {
					console.log('食品信息请求失败', err)
				}
			})
			// 评价信息
			uni.request({
				url: 'http://10.31.67.9:8002/admin/vuecomments',
				method: 'GET',
				data: {
					id: query.id
				},
				success: (res) => {
					// console.log('评价信息请求成功', res)
				},
				fail(err) {
					console.log('评价信息请求失败', err)
				}
			})
		},
		methods: {
			// tab切换
			gotab(item) {
				// console.log(item,'item')
				this.isActive = !this.isActive
			},
			onClick(e) {
				this.show = !this.show
			},
			buttonClick(e) {
				console.log(e)
				this.show = !this.show
			},
			reduce(data) {
				this.$store.commit('reduceShop', data)
			},
			add(data) {
				data.maxcount += 1 
				this.$store.commit('AddShop', data)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			goBalance() { 
				uni.navigateTo({ 
					url: '/pages/balance/balance'
				})
			}
		}
	}
</script>

<style lang="scss">
	.product {
		width: 100%;
		height: 100vh;
		background: #fff;
		display: flex;
		flex-direction: column;

		// 头部
		.product_top {
			height: 20vh;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 10px 0;

				.pp {
					padding: 0 4px;
					font-size: 10px;
					background: #ffef03;
					color: #7b4b0c;
					font-weight: bold;
				}
			}

			.xiao {
				font-size: 12px;

				span {
					margin: 0 4px;
				}
			}
		}

		// 主体 
		.product_main {
			width: 100%;
			flex: 1;

			.PopupTop {
				width: 100%;
				height: 50px;

				.PopupEmpty {
					float: right;
					height: 50px;
					width: 100px;
					line-height: 50px;
				}
			}

			.PopupFoot {
				width: 100%;
				height: 50px;
			}

			.shopItem {
				width: 100%;
				height: 80px;


				.shopImg {
					width: 100px;
					height: 80px;
					float: left;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shopText {
					width: 350px;
					height: 80px;
					float: left;
					margin-left: 10px;
				}
			}

			.foodtitle {
				background: #f3f5f7;
				padding-left: 10px;
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				color: #b1b5ba;
				margin: 10px 0;
			}

			.food {
				height: 100px;
				border-bottom: 1px solid #f3f5f7;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
		}

		.product_foot {
			height: 10vh;

			.product_foot_Price {
				height: 100%;
				float: left;
				font-size: 18px;
				font-weight: bold;
				line-height: 50px;
			}

			.product_foot_Bth {
				width: 100px;
				height: 100%;
				float: right;
			}
		}
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>